<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夹 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<!-- 开启理想视口，用于做移动端网页适配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置浏览器+地址栏的颜色 （仅支持安卓手机浏览器 并且兼容性不是很好） -->
		<meta name="theme-color" content="#000000" />
		<!-- 描述网站信息，介绍自己 -->
		<meta
			name="description"
			content="Web site created using create-react-app"
		/>
		<!-- 这是个图标，当网站被别人添加到主屏幕的时候的图标用的就是这个图标 （只支持苹果手机） -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<!-- 主要用于应用加壳  套壳APP之类的会用到  这个文件可以配置很多的信息如app名字 APP需要的权限等等 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
		<link rel="stylesheet" href="./base.css" />
		<link rel="stylesheet" href="%PUBLIC_URL%/base.css" />
		<link rel="stylesheet" href="/base.css" />
		<!-- 
			解决样式丢失问题：
				1. 什么时候会发生样式丢失？
					当我们路由的匹配是个多级路由匹配的时候 第一次匹配时不会丢失的 只有多级匹配了之后再刷新网页会发生
						原因就是因为多级路由 导致 再 html文件理由link引入的时候相对路径发生了改变
				
				2. 解决方案
					解决方法有3种
						1. 再引入link的时候不要使用 ./ 直接使用 /  
							./ 表示的是相对路径 /表示的是这台服务器的路径

						2. 再引入link的时候不要使用 ./ 直接使用 %PUBLIC_URL%
							%PUBLIC_URL% 表示的是 public文件夹的 绝对路径 这个绝对不会发生错误

						3. 路由器选择不使用 BrowserRouter 使用 HashRouter 
							这个方法也可行 但是一般不会去改路由器 所以这种当作常识知道就可以了

				补充 之所以脚手架运行有服务器是因为 webpack 配置了 devServer 这个是一台服务器 
					前端的代码再开发环境下都是放在这个服务器上运行
		-->
		<title>React App</title>
	</head>
	<body>
		<!-- 若浏览器不支持JS 则会显示这个标签里面的文字 字如其名  noscript -->
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
	</body>
</html>
